<template>
  <section class="component user-select">
    <data-box
      :data="dataSet"
      :page="pageService"
      @onPageChange="getUsers"
      :selectionRow.sync="selectionRow"
    >
      <template slot="columns">
        <el-table-column
          prop="realName"
          label="姓名"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="userLevel"
          label="催收员等级"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="(row) => $filter.dictConvert(row.userLevel,'UserLevel')"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="deptName"
          label="机构"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="userStatus"
          label="状态"
          :formatter="(row) => $filter.dictConvert(row.userStatus,'CommonState')"
          :min-width="$helper.getColumnWidth(2)"
        ></el-table-column>
        <el-table-column
          prop="caseSwitch"
          label="分案开关"
          :formatter="(row) => $filter.dictConvert(row.caseSwitch,'CommonState')"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="userEmail"
          label="邮箱"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="operatorRealName"
          label="创建人"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :min-width="$helper.getColumnWidth(6)"
          :formatter="(row) => $filter.dateTimeFormat(row.createTime)"
          show-overflow-tooltip
        ></el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="confirm">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop, Emit, Watch } from "vue-property-decorator";
import DataBox from "~/components/common/data-box.vue";
import { UserService } from "~/services/management-service/user.service";
import { PageService } from "~/utils/page.service";

@Component({
  components: {
    DataBox
  }
})
export default class UserSelect extends Vue {
  @Dependencies(UserService) private userService: UserService;
  @Dependencies(PageService) private pageService: PageService;
  @Prop({ required: true })
  private departmentId;

  private dataSet: any[] = [];
  private selectionRow: any = {};

  @Emit("success")
  private emitSuccess(val) {}

  @Watch("departmentId", { immediate: true })
  private onDepartmentIdChange(val) {
    if (val) this.getUsers();
  }

  private getUsers() {
    this.userService
      .getAllUsers(
        { deptId: this.departmentId, caseSwitch: "ENABLED" },
        this.pageService
      )
      .subscribe(data => {
        this.dataSet = data;
        if (this.dataSet[0]) {
         this.selectionRow = this.dataSet[0];
        }
      });
  }

  private confirm() {
    if (!this.selectionRow) {
      this.$message("请选择用户");
      return;
    }
    this.emitSuccess({
      id: this.selectionRow.id,
      realName: this.selectionRow.realName
    });
  }
}
</script>

<style lang="less" scoped>
</style>
